<template>
	<view class="fun-flex-col page">
		<!-- <view class="text-wrapper">Today</view> -->
		<uni-nav-bar class="nav-bar" color="#000000" background-color="#F6F6F6"
			title="Top Up Activities" left-icon="left" status-bar
			:fixed="true" :border="false" @clickRight='filter' @clickLeft='back'>
			<block slot="right">
				<view class="right">
					<text :class="queryData.status != 0 ? 'current' : ''">filter</text>
					<image src="@/static/common/filter.png" v-if='queryData.status == 0'></image>
					<image src="@/static/common/filter_on.png" v-else></image>
				</view>
			</block>
		</uni-nav-bar>
		
		<view class="fun-flex-col list-wrap">
			<view class="fun-flex-col list-item" v-for="item in withdrawList" :key="item.id" @click="toDetail(item)">
				<view class="fun-flex-row fun-justify-between fun-items-center">
					<text class="font">Withdraw from my account</text>
					<text class="font_4">-${{item.putAmount}}</text>
				</view>
				
				<text class="font_5">Transaction Fee:${{item.serviceAmount}}</text>
				
				<view class="fun-flex-row fun-justify-between fun-items-center group_4">
					<text class="orderNo">Order No. :{{item.orderNo}}</text>
					
					<view class="status progress" v-if='item.status == 1 || item.status == 5'>{{item.status | withdrawStatus}}</view>
					<view class="status completed" v-if='item.status == 6'>{{item.status | withdrawStatus}}</view>
					<view class="status failed" v-if='item.status == 7 || item.status == 8'>{{item.status | withdrawStatus}}</view>
				</view>
			</view>
		</view>
		
		<filter-modal v-show="isShowFilter" :filterData="filterList" @close='isShowFilter = false' @done="done"></filter-modal>
	</view>
</template>

<script>
	import {withdrawOrderList} from "@/api/account.js"
	import filterModal from "@/components/filterModal.vue"
	export default {
		data() {
			return {
				queryData:{
					page:1,
					limit:10,
					status:0,
					timeZone:8
				},
				total:0,
				isShowFilter:false,
				filterList:[
					{label:'In Progress',value:1},
					{label:'In Transfer',value:5},
					{label:'Success',value:6},
					{label:'Rejected',value:7},
					{label:'Failed',value:8}
				],
				withdrawList:[],
				windosHeight:"" //可使用窗口高度(不包含NavigationBar和TabBar的高度)
			};
		},
		onLoad() {
			this.queryData.timeZone = this.UTILS.getTimeZone() || 8;
			uni.getSystemInfo({
				success: res => {
					this.windosHeight = res.windowHeight
				}
			})
			this.getWithdrawOrderlist()
		},

		methods: {
			getWithdrawOrderlist(){
				withdrawOrderList(this.queryData).then(res => {
					if(res.code == 0){
						this.withdrawList = this.withdrawList?.concat(res?.data || []) || [];
						this.total = res.count;
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			// 触底加载更多
			scrolltolower(){
				if (this.total > this.withdrawList.length) {
					this.queryData.page++;
					this.getWithdrawOrderlist();
				}
			},
			
			toDetail(item){
				uni.navigateTo({url:'/pages/account/withdrawDetail?orderId='+encodeURIComponent(item.id)})
			},
			
			back(){
				uni.switchTab({url:`/pages/account/index`})
			},
			filter(){
				this.isShowFilter = true
			},
			
			done(item){
				this.queryData.page = 1;
				this.withdrawList = [];
				this.queryData.status = item.value || 0;
				this.getWithdrawOrderlist()
			}
		},
		
		components:{
			filterModal
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		.right{
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			image{
				margin-left: 10rpx;
				width: 30rpx;
				height: 28rpx
			}
			.current{
				color: rgba(26, 123, 153, 1);
			}
		}
		.text-wrapper {
			padding: 16rpx 0 16rpx 40rpx;
			background-color: #f7f7f7;
			font-size: 24rpx;
			color: #737580;
		}
		.list-wrap{
			padding: 0 32rpx 32rpx 32rpx;
			.list-item {
				padding: 32rpx 0;
				border-bottom: 2rpx solid #B0B1BF;
				.font_4 {
					font-size: 28rpx;
					font-weight: 700;
					color: #000000;
				}
				.font_5 {
					font-size: 24rpx;
					font-family: SF Pro Display;
					color: #999999;
					margin: 16rpx 0;
				}
			
				.group_4 {
					.orderNo{
						font-size: 24rpx;
						color: #999999;
					}
					.status {
						width: 188rpx;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
						border-radius: 4rpx;
						font-weight: 500;
					}
					
					.progress{
						color: #8C7F44;
						background: #FDF0BA;
					}
					
					.completed{
						color: #51844D;
						background: #E9FAF0;
					}
					
					.failed{
						color: #CA5456;
						background: rgba(255,146,165,0.3);
					}
				}
			}
		}
		
		.font {
			font-size: 32rpx;
			font-family: SF Pro Display;
			color: #000000;
		}
	}
</style>